﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div style="background:#00ffff;height:100PX; width:100px; position:relative;"><p>123</p></div>
    <script>
        //鼠标移动事件
        //let div = document.querySelector(`div`);
        ////div.onmousemove = function () {
        ////    console.log(`===`);
        ////}
        ////滚动事件
        ////window.onscroll = function () {
        ////    console.log(`页面滚动`);
        ////}
        ////window.onwheel = function () {
        ////    console.log(`滚轮事件`);
        ////}
        //window.onkeydown = function (e) {
        //    console.log(`按下事件`);
        //    console.log(e.key);
        //    console.log(e.keyCode);
        //    var a = div.getBoundingClientRect();
        //    console.log(a);
        //    if (e.keyCode==68) {
        //        div.style.left = a.left + 2 + `px`;
        //    }
        //    if (e.keyCode == 65) {
        //        div.style.left = a.left - 20 + `px`;
        //    }
        //}
        ////window.onkeyup = function () {
        ////    console.log(`抬起事件`);
        ////}
        ////window.onkeypress = function () {
        ////    console.log(`点击事件`);
        ////}
    </script>

    <script>
        let div = document.querySelector(`div`);

        window.onresize = function () {
            console.log(`浏览器窗口大小改变了`);

        }

        window.onkeydown = function (e) {
            console.log(`键盘按下事件`);
            console.log(e.key); //按下的什么键
            console.log(e.keyCode);//按下的建的键码值
            var a = div.getBoundingClientRect(); // 获取div对象
            console.log(a);

        }
        window.onkeyup = function () {
            console.log(`键盘弹起事件`);

        }
        window.onkeypress = function () {
            console.log(`键盘点击事件`);

        }

        window.onscroll = function () {
            console.log(`页面滚动事件`);
            console.log(document.documentElement.scrollTop);//获取文档内容被卷走的高度

        }
        window.onwheel = function () {
            console.log(`滑动事件`);

        }

        div.onclick = function () {
            console.log(`点击`);
        }

        div.ondblclick = function () {
            console.log(`双击`);
        }

        div.oncontextmenu = function () {
            console.log(`右键`);
        }

        div.onmouseover = function () {
            console.log(`移入`);//给目标及子代添加事件
        }

        div.onmouseout = function () {
            console.log(`移出`);
        }

        div.onmouseenter = function () {
            console.log(`移入`);//给目标添加事件
        }

        div.onmouseleave = function () {
            console.log(`移出`);
        }

        div.onmousemove = function () {
            console.log(`鼠标移动`);
        }

        div.onmousedown = function () {
            console.log(`按下`);
        }

        div.onmouseup = function () {
            console.log(`抬起`);
        }
    </script>
    <!--
        onclick 点击事件
        ondblclick 双击事件
        oncontextmenu 右键点击事件
        onmousedown 按下事件
        onmouseup抬起事件
        onmouseenter  onmouseover移入
        onmouseleave  onmouseout移出
        onmousemove鼠标移动事件
        onscroll页面滚动事件
        onkeypress键盘点击事件
        onkeyup键盘抬起事件
        onkeydown键盘按下事件
        onresize浏览器窗口大小更改了
     -->
</body>
</html>